//表单组件
<template>
  <div>
    <el-form :ref="refName" :model="valueData" :label-width="form.labelWidth">
      <div v-for="(item,index) in form.data" :key="index">
        <!-- input输入框 -->
        <el-form-item
          v-if="item.show && item.show() === false ? false: true"
          :label="item.label || ''"
          :prop="item.prop"
          :label-width="item.labelWidth || '80px'"
          :required="item.required || false"
          :rules="item.rules || []"
        >
          <template v-if="item.type === 'slot'">
            <slot :name="'form-' + item.prop" />
          </template>
          <span v-if="item.type =='text'" style="font-size:14px">{{ valueData[item.prop] || '未填写' }}</span>
          <el-input
            v-if="item.type=='input'"
            v-model="valueData[item.prop]"
            :size="item.size||'medium'"
            :clearable="item.clearable"
            :disabled="item.disabled || false"
            :placeholder="item.placeholder"
          />
          <el-input
            v-if="item.type=='inputNumber'"
            v-model.number="valueData[item.prop]"
            :size="item.size||'medium'"
            :minlength="item.minlength||''"
            :maxlength="item.maxlength||''"
            :min="item.min||''"
            :max="item.max||''"
            :step="item.step"
            :disabled="item.disabled || false"
            :placeholder="item.placeholder"
          />
          <el-input
            v-if="item.type=='inputTextarea'"
            type="textarea"
            :autosize="item.autosize && true"
            :rows="item.rows||2"
            :maxlength="item.maxlength"
            show-word-limit
            :placeholder="item.placeholder"
            v-model="valueData[item.prop]">
          </el-input>
          <!-- select选择器 -->
          <el-select
            v-if="item.type=='select'"
            :size="item.size||'medium'"
            v-model="valueData[item.prop]"
            :placeholder="item.placeholder"
            @change="item.methods && handleEvent(item.methods,item,valueData)"
          >
            <el-option
              v-for="select in item.selectOption()"
              :key="select.value"
              :label="select.label"
              :value="select.value"
            />
          </el-select>
          <!-- 单选框组 -->
          <el-radio-group
            v-if="item.type=='radioGroup'"
            :size="item.size||'medium'"
            v-model="valueData[item.prop]"
            @change="item.methods && handleEvent(item.methods,valueData)"
          >
            <el-radio
              v-for="radio in item.radioGroup()"
              :key="radio.value"
              :label="radio.value"
            >{{ radio.label }}</el-radio>
          </el-radio-group>
          <!-- 复选框组 -->
          <el-checkbox-group
            v-if="item.type=='checkboxGroup'"
            v-model="valueData[item.prop]"
            :size="item.size||'medium'"
            :min="item.min"
            :max="item.max"
            @change="item.methods && handleEvent(item.methods,valueData)"
          >
            <el-checkbox
            v-for="check in item.checkboxGroup()"
            :key="check.value"
            :label="check.value">
            {{check.label}}
            </el-checkbox>
          </el-checkbox-group>
          <!-- 年月日 -->
          <el-date-picker
            v-if="item.type=='ymdDatetime'"
            v-model="valueData[item.prop]"
            :format="item.format"
            :picker-options="item.pickerOptions&&item.pickerOptions()"
            :value-format="item.valueFormat"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          <!-- 日期时间 -->
          <el-date-picker
            v-if="item.type=='datetime'"
            :size="item.size||'medium'"
            v-model="valueData[item.prop]"
            type="datetime"
            :picker-options="item.pickerOptions&&item.pickerOptions()"
            :format="item.format"
            :value-format="item.valueFormat"
            placeholder="选择日期"
          />
           <!-- 日期范围 -->
          <el-date-picker
            v-if="item.type=='datedaterange'"
            v-model="valueData[item.prop]"
            :format="item.format"
            :size="item.size||'medium'"
            :value-format="item.valueFormat"
            :picker-options="item.pickerOptions&&item.pickerOptions()"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <!-- 日期时间范围 -->
          <el-date-picker
            v-if="item.type=='datetimerange'"
            v-model="valueData[item.prop]"
            :format="item.format"
            :size="item.size||'medium'"
            :value-format="item.valueFormat"
            :picker-options="item.pickerOptions&&item.pickerOptions()"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <tinymce
          v-if="item.type=='tinymce'"
          v-model="valueData[item.prop]"
          :height="item.height || 500"/>
        </el-form-item>
        <!-- <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button @click="resetForm()">取消</el-button>
        </el-form-item>-->
      </div>
    </el-form>
  </div>
</template>

<script>
import tinymce from '@/components/Tinymce'

export default {
  name: 'JblForm',
  components: {
    tinymce
  },
  props: {
    form: {
      type: Object,
      default: () => {
        return {
          // form-item 基本配置
          data: [
            {
              type: 'input',
              required: true,
              show: data => {
                console.log(data, 'ddddddd')
              },
              name: 'courseName',
              label: '课程名称',
              placeholder: '请输入课程名称',
              rules: {} // 表单验证
            }
          ],
          // v-model 数据
          valueData: {}
        }
      }
    },
    // refs
    refName: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 表单数据
    valueData: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      // valueData: {}
    }
  },
  computed: {
    // rules() { // 校验数据
    //   const rules = this.form.data.reduce((map, i) => {
    //     if (i.rules) {
    //       map[i.prop] = i.rules
    //     }
    //     return map
    //   }, {})
    //   return rules
    // }
  },
  watch: {
    form: {
      handler: function(val) {
        // 更新form数据
        this.$emit('update:form', val)
      },
      deep: true
    }
  },
  created() {
    // console.log(this.dealObjectValue(this.form), 'form')
  },
  mounted() {
    this.$emit('update:refName', this.$refs[this.refName])
  },
  methods: {
    // 所有事件
    handleEvent(methods, data, val) {
      this.$emit('handleEvent', methods, data, val)
      // console.log(methods, '方法名')
    },
    onSubmit() {
      console.log(this.valueData, 'onform')
    },
    resetForm() {
      this.$refs[this.refName].resetFields()
      this.$emit('update:form', this.form)
      // this.$emit('input', this.form)
    },
    dataType(obj) {
      if (obj === null) return 'Null'
      if (obj === undefined) return 'Undefined'
      return Object.prototype.toString.call(obj).slice(8, -1)
    },
    dealObjectValue(obj) { // 过滤对象值为空的
      var param = {}
      if (obj === null || obj === undefined || obj === '') return param
      for (var key in obj) {
        if (this.dataType(obj[key]) === 'Object') {
          param[key] = this.dealObjectValue(obj[key])
        } else if (obj[key] !== null && obj[key] !== undefined && obj[key] !== '') {
          param[key] = obj[key]
        }
      }
      return param
    }
  }
}
</script>
